<template>
  <div v-loading="loading">
    <crumbs :title="'工单管理'"></crumbs>
    <div class="container" v-loading="loading">
      <div class="handle-box">
        <el-select
          clearable
          filterable
          v-model="Search_form.userId"
          placeholder="请选择用户"
          class="mr10"
        >
          <el-option
            v-for="(item, index) in userDropdown"
            :key="index"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-select
          clearable
          v-if="nowSearch == 'chatState'"
          v-model="Search_form.chatState"
          placeholder="请选择工单状态"
          class="mr10"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="search()"
          >搜索</el-button
        >
      </div>
      <el-table
        v-loading="$store.state.requestLoading"
        :data="allData"
        border
        ref="multipleTable"
      >
        <el-table-column
          prop="sendContent"
          label="反馈内容"
          :show-overflow-tooltip="true"
          min-width="320"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="chatState"
          label="工单状态"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.chatState == 'userChat'">未回复</span>
            <span v-else-if="scope.row.chatState == 'adminChat'">回复未读</span>
            <span v-else>回复已读</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="sendTime"
          label="反馈时间"
          min-width="160"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.sendTime | change }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="反馈用户"
          min-width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          align="center"
          prop="userImgUrl"
          label="用户头像"
          min-width="150"
        >
          <template slot-scope="scope">
            <el-popover placement="top-start" trigger="click">
              <a :href="scope.row.userImgUrl" target="_blank" title="查看图片">
                <img
                  :src="scope.row.userImgUrl"
                  style="min-width: 200px;height: 200px; cursor:pointer;"
                />
              </a>
              <img
                slot="reference"
                :src="scope.row.userImgUrl"
                style="width: 50px;height: 50px; cursor:pointer"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="replyContent"
          label="回复内容"
          :show-overflow-tooltip="true"
          min-width="320"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="replyTime"
          label="回复时间 "
          min-width="160"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.replyTime | change }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="replyUserName"
          label="回复人"
          min-width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="sourceName"
          label="操作"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-chat-dot-round"
              v-if="scope.row.chatState == 'userChat'"
              @click="examine(scope.row)"
              >回复
            </el-button>
            <span v-else> 已回复 </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 50, 100]"
          :page-size="size"
          :current-page="currentPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totals"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title="回复页" top="5vh" :visible.sync="editVisible" width="50%">
      <el-form ref="form" label-width="100px">
        <el-form-item label="反馈内容">
          <span v-html="nowSee.sendContent"> </span>
        </el-form-item>
        <el-form-item label="反馈时间">
          <span>{{ nowSee.sendTime | change }} </span>
        </el-form-item>
        <el-form-item label="反馈图片">
          <span v-for="(item, index) in nowSee.imgUrl" :key="index">
            <el-image
              style="width: 100px; height: 100px"
              :src="item"
              :preview-src-list="nowSee.imgUrl"
            >
            </el-image>
          </span>
        </el-form-item>
        <el-form-item label="回复内容">
          <el-input
            type="textarea"
            :rows="8"
            placeholder="请输入内容"
            v-model="textarea"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="$store.state.requestLoading"
          @click="ensure"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
	import crumbs from "../../views/Crumbs.vue";

	export default {
		name: "",
		components: {
			crumbs
		},
  data() {
    return {
      loading: true,
      //搜索关键词
      select_word: null,
      //数据
      allData: null,
      //总页数
      totals: null,
      //每页的数据
      size: 5,
      currentPage: 1,
      editVisible: false,
      imageBig: "",
      nowSee: {
        id: null,
        sendContent: null,
        sendTime: null,
        imgUrl: null
      },
      //回复内容
      textarea: null,
      //工单状态
      options: [
        {
          value: "userChat",
          label: "未回复"
        },
        {
          value: "adminChat",
          label: "回复未读"
        },
        {
          value: "chatOver",
          label: "回复已读"
        }
      ],
      Search_form: {
        userId: "",
        chatState: ""
      },
      //用户下拉
      userDropdown: null,
      nowSearch: "chatState",
      loading2: true
    };
  },
  methods: {
    //搜索
    search(pageNo) {
      // console.log(pageNo)
      this.loading2 = true;
      this.getusersListAll();
    },
    getusersListAll() {
      this.loading = true;
      this.$axios
        .getHelperChat({
          userId: this.Search_form.userId,
          chatState: this.Search_form.chatState,
          pageNo: this.currentPage,
          pageSize: this.size
        })
        .then(res => {
          this.loading2 = false;
          if (res.success) {
            this.totals = res.data.total;
            this.allData = res.data.records;
          }
          this.loading = false;
        });
    },
    handleSizeChange(item) {
      this.size = item;
      this.getusersListAll();
    },
    handleCurrentChange(item) {
      console.log("www", item);
      this.currentPage = item;
      this.getusersListAll();
    },
    //回复
    examine(item) {
      this.$axios
        .getAdminChat({
          id: item.id
        })
        .then(res => {
          for (let key in this.nowSee) {
            this.nowSee[key] = res.data[key];
          }
          this.editVisible = true;
        });
    },
    //确认回复
    ensure() {
      this.loading2 = true;
      this.editVisible = false;
      this.$axios
        .sureAdminChat({
          id: this.nowSee.id,
          replyContent: this.textarea
        })
        .then(res => {
          this.loading2 = false;
          if (res.success) {
            this.$message({
              message: "回复成功",
              type: "success"
            });
            this.getusersListAll();
          }
        });
    },
    //获取用户
    getUserDropdown() {
      this.$axios.getUserDropdown().then(res => {
        if (res.success) {
          this.userDropdown = res.data;
        }
      });
    }
  },
  created() {
    this.getusersListAll({
      pageNo: 1
    });
    this.getUserDropdown();
  },
  filters: {
    //改变时间格式
    change(item) {
      if (!item) return "暂无";
      let time = new Date(item);
      let hours =
        time.getHours().toString().length > 1
          ? time.getHours()
          : "0" + time.getHours();
      let Seconds =
        time.getSeconds().toString().length > 1
          ? time.getSeconds()
          : "0" + time.getSeconds();
      let Minutes =
        time.getMinutes().toString().length > 1
          ? time.getMinutes()
          : "0" + time.getMinutes();
      return (
        time.getFullYear() +
        "-" +
        (time.getMonth() * 1 + 1) +
        "-" +
        time.getDate() +
        " " +
        hours +
        ":" +
        Minutes +
        ":" +
        Seconds
      );
    }
  }
};
</script>
<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.crumbs {
  margin: 10px 0;
}

.mr10 {
  margin-right: 10px;
}

.handle-select {
  width: 120px;
}

.container {
  padding: 30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
